<template>
	<el-dialog :title="type === 'add' ? '新增用户' : '编辑用户'" :visible.sync="dialogVisible" width="500px"
		:before-close="closeDialog">
		<el-form ref="form" :model="form" :rules="rules" size="mini" label-width="120px" style="width:400px">
			<el-form-item label="用户名称" prop="username">
				<el-input v-model="form.username" placeholder="输入用户名称"></el-input>
			</el-form-item>
			<el-form-item label="电话号码" prop="mobile">
				<el-input :disabled="type === 'edit'" v-model="form.mobile" placeholder="电话号码"></el-input>
			</el-form-item>
			<el-form-item label="用户角色" prop="roleId">
				<el-select v-model="form.roleId" placeholder="请选择">
					<el-option v-for="item in roleList" :key="item.value" :label="item.roleName" :value="item.id"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="状态" prop="locked">
				<el-radio v-model="form.locked" :label="1">可用</el-radio>
				<el-radio v-model="form.locked" :label="2">锁住</el-radio>
			</el-form-item>
			<el-form-item style="margin-top:40px">
				<el-button style="width:100px;" type="primary" @click="submit" :loading="loading">提交</el-button>
			</el-form-item>
		</el-form>
	</el-dialog>
</template>
<script>
import { role_list } from "@/api/sysrole";
import { admin_add, admin_update, admin_detail } from "@/api/sysuser";
import { validatePhone } from "@/utils/validata";

export default {
	components: {
	},
	props: {
		dialogVisible: {
			type: Boolean,
			default: false
		},
		type: {
			type: String,
			default: "add"
		},
		editId: {
			type: Number,
			default: 0
		}
	},

	data() {
		return {
			loading: false,
			form: {
				username: "",
				mobile: "",
				roleId: "",
				avatar: "",
				locked: 1,
				id: this.$route.query.editId
			},
			rules: {
				username: [
					{ required: true, message: "请输入管理员名称", trigger: "blur" }
				],
				mobile: [
					{ required: true, validator: validatePhone, trigger: "blur" }
				],
				roleId: [{ required: true, message: "请选择", trigger: "blur" }],
				locked: [{ required: true, message: "请选择", trigger: "blur" }],
				avatar: [{ required: true, message: "请上传", trigger: "blur" }]
			},
			roleList: []
		};
	},

	watch: {
		async editId() {
			if (this.type === "edit") {
				const res = await admin_detail(this.editId);
				this.form = res;
			} else {
				this.form = {
					username: "",
					mobile: "",
					roleId: "",
					locked: 1,
					avatar: ""
				};
			}
		}
	},
	mounted() {
		this.initRoles();
	},
	methods: {
		/**
		 * 提交任务
		 */
		async submit() {
			const valid = await this.$refs["form"].validate;
			if (!valid) {
				return
			}
			if (this.type === "add") {
				const res = await admin_add(this.form)
				this.$message.success(res ? res : "新增成功");
				this.$emit("update:dialogVisible", false);
				this.$emit("submit");
			}

			if (this.type === "edit") {
				const res = await admin_update(this.form)
				this.$message.success(res ? res : "更新成功");
				this.$emit("update:dialogVisible", false);
				this.$emit("submit");
			}
		},
		async initRoles() {
			const res = await role_list();
			this.roleList = res
		},
		/**
		 * 关闭弹窗
		 */
		closeDialog() {
			this.$emit("update:dialogVisible", false);
		},
	}
};
</script>
<style lang="less"></style>
